<template>
	<view class="content">
		<view class="pageBox round">
			<view style="display: flex;flex-wrap: wrap;width: 100%;">
				<view class="listItem" v-for="(item,index) in info.category" :key="index" @click="toCategory(item.id)">
				  <image :src="item.image" style="max-width: 120rpx;max-height: 120rpx;"/>
				  <view style="margin-top: 8px;">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="pageBox mt10 flexWrap tabBox">
			<view class="tabItem" @click="toCoupon()">
				<view>
					<view class="title">领优惠券</view>
					<view class="desc">{{info.couponLabel}}</view>
				</view>
				<image style="width: 30px;height: 30px;" src="../../static/libao.png" alt="" />
			</view>
			<view class="tabItem" @click="toVip()">
				<view>
					<view class="title">开通会员</view>
					<view class="desc">{{info.vipCardLabel}}</view>
				</view>
				<image style="width: 30px;height: 30px;" src="../../static/huiyuan.png" alt="" />
			</view>
		</view>
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration" autoplay interval="3000">
			<swiper-item v-for="(item,index) in info.banner" :key="index">
				<image style="width: 100%;height: 100%;" :src="item" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="backF" v-for="(item,index) in info.package" :key="index">
			<view class="itemTitle">{{item.name}}</view>
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
				<view style="display: flex;">
					<view v-for="(demo,index) in item.commodity" :key="index" class="packageItem" @click="toDetail(demo.id,demo.ca_id)">
						<image style="width: 70px;height: 70px;" :src="demo.images[0]"></image>
						<view class="name">{{demo.name}}</view>
						<view class="price">￥{{demo.lowest.price}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getInfo } from '@/api/home.js'
	import DateSelect from './dateSelect.vue'
	export default {
		components:{
			DateSelect
		},
		data() {
			return {
				list:[
				  {
					text:'洗衣',
					img: '../../static/xiyi.png'
				  },
				  {
					text:'洗鞋',
					img: '../../static/xixie.png'
				  },
				  {
					text:'洗包',
					img: '../../static/xibao.png'
				  },
				  {
					text:'洗家纺',
					img: '../../static/xijiafang.png'
				  }
				],
				package:[
					{
						title:'洗衣套餐'
					}
				],
				info:{}
			}
		},
		onLoad(options) {
			if(options.consumerId) {
				const config = uni.getStorageInfoSync('consumerId')
				if(!config) uni.setStorageSync('consumerId',options,consumerId)
				uni.navigateTo({
					url:'/pages/logs/index'
				})
			}
		},
		onShow() {
			getInfo().then(res=>{
				let infoData = []
				res.data.infoData = infoData
				this.info = res.data
			})
		},
		methods: {
			getTimes(e){
				console.log(e,'e')
			},
			toCoupon() {
				uni.navigateTo({
					url: '/pages/coupon/index'
				})
			},
			toVip() {
				uni.navigateTo({
					url: '/pages/vip/index'
				})
			},
			toCategory(id) {
				uni.navigateTo({
					url: '/pages/category/index?id='+id
				})
			},
			toDetail(id,ca) {
				console.log(ca,'ca')
				uni.navigateTo({
					url:'/pages/detail/index?id='+id+'&ca_id='+ca
				})
			}
		}
	}
</script>

<style scoped lang="less">
	
	/* 隐藏滚动条的样式 */
	.scroll-container {
	  overflow: auto; /* 保持可滚动性 */
	  -ms-overflow-style: none; /* IE 和 Edge */
	  scrollbar-width: none; /* Firefox */
	}
	 
	/* 针对其他浏览器和平台的隐藏滚动条的样式 */
	.scroll-container::-webkit-scrollbar {
	  display: none; /* Chrome, Safari 和 Opera */
	}
	.content{
		padding: 10px 15px;
		box-sizing: border-box;
		.itemTitle{
			font-weight: bold;
			font-size: 16px;
		}
		.backF{
			background: #ffffff;
			margin-top: 10px;
			padding: 15px;
		}
		.packageItem{
			margin-top: 10px;
			margin-right: 12px;
			font-size: 14px;
			image{
				border-radius: 4px;
			}
			.name{
				width: 70px;
				overflow:hidden;//超出的隐藏
				text-overflow:ellipsis;//省略号
				white-space:nowrap;//强制一行显示

				margin: 5px 0;
			}
			.price{
				font-weight: bold;
			}
		}
		.tabBox{
			position: relative;
			padding: 20px 10px!important;
			::after{
				content: '';
				height: 80%;
				width: 1px;
				position: absolute;
				left: calc(50% - 1px);
				top: 0;
				bottom: 0;
				margin: auto;
				background-color: #f5f5f5;
			}
		}
		.pageBox{
		  background: #ffffff;
		  border-radius: 4px;
		  padding: 10px;
		  box-sizing: border-box;
		  .tabItem{
			  width: 50%;
			  padding-left: 8px;
			  box-sizing: border-box;
			  display: flex;
			  justify-content: space-between;
			  padding-right: 20px;
			  // position: relative;
			  // image{
				 //  position: absolute;
				 //  top: 15%;
				 //  right: 10px;
			  // }
			  .title{
				  font-size: 16px;
				  font-weight: bold;
			  }
			  .desc{
				  font-size: 12px;
				  margin-top: 10px;
			  }
		  }
		  .listItem{
			width: 25%;
			padding: 22rpx;
			box-sizing: border-box;
		    text-align: center;
		    font-size: 14px;
			text-align: center;
		    display: flex;
		    flex-direction: column;
		    justify-content: space-around;
		  }
		  .boxItem{
		    display: flex;
		    flex-wrap: wrap;
		    width: 49%;
		    font-size: 12px;
		    // justify-content: space-between;
		  }
		}
		.flex{
		  display: flex;
		  justify-content: space-between;
		}
		.round{
		  display: flex;
		  justify-content: space-around;
		}
		.mt10{
		  margin-top: 10px;
		}
		.flexWrap{
			display: flex;
			flex-wrap: wrap;
		}
	}
	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}
	.swiper {
		height: 300rpx;
		margin-top: 10px;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}
	.info {
		position: absolute;
		right: 20rpx;
	}
	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}
	.uni-bg-red{
		background-color: red;
	}
	.uni-bg-green{
		background-color: green;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
</style>
